<template>
   <div  class="container">
      <el-form
         ref = "memberBindRef"
           :model="cardForm"
           :label-width="110"
            :rules="rules"
           status-icon
           style="width: 70%;padding-left: 10%;"
         >
            <el-form-item label="会员" >
                 <el-select v-model="cardForm.memberId"
                       placeholder="-请输入名字或手机号码搜索-"
                       filterable
                       remote
                       reserve-keyword
                       :remote-method="remoteMethod"
                       :loading="loading"
                       >
                           <template #header>
                               <el-row >
                                   <el-col :span="3"><h3>id</h3></el-col>
                                   <el-col :span="7"><h3>会员名称</h3></el-col>
                                   <el-col :span="7"><h3>性别</h3></el-col>
                                   <el-col :span="7"><h3>手机号</h3></el-col>
                               </el-row>
                           </template>
                          <el-option
                           v-for="item in remoteMemberData"
                           :key="item.id"
                           :label="item.name"
                           :value="item.name"
                           >
                           <el-row>
                               <el-col :span="3"><span>{{ item.id }}</span></el-col>
                               <el-col :span="7"><span>{{ item.name }}</span></el-col>
                               <el-col :span="7"><span >{{ item.gender }}</span></el-col>
                               <el-col :span="7"><span >{{ item.tel }}</span></el-col>
                           </el-row>
                         
                           </el-option>

                            <template #loading>
                               <svg class="circular" viewBox="0 0 50 50">
                                   <circle class="path" cx="25" cy="25" r="20" fill="none" />
                               </svg>
                           </template>
                         </el-select>
            </el-form-item>
             <el-form-item label="会员卡选择"  prop="cardId">
                 <el-select
                       v-model="cardForm.cardId"
                       placeholder="-请选择绑定的会员卡-"
                       size="large"
                       style="width: 100%"
                       >
                       <el-option
                           v-for="item in selectList.cardList"
                           :key="item.value"
                           :label="item.label"
                           :value="item.value"
                       />
                       </el-select>
             </el-form-item>
             <el-form-item label="充值次数" >
                 <el-input-number
                   v-model="cardForm.validCount"
                   :min="1"
                   controls-position="right"
                   class="w50"
               />
             </el-form-item>
             <el-form-item label="有效期" >
               <el-input-number
                       v-model="cardForm.validDay"
                       :min="1"
                       controls-position="right"
                       class="w50"
                   />
             </el-form-item>
             <el-form-item label="实收金额"   prop="receivedMoney">
                <el-input  placeholder="金额" class="w50" v-model="cardForm.receivedMoney">
                     <template #prepend>
                       <span>￥</span>
                   </template>
                   <template #append>
                       <span>元</span>
                   </template>
                </el-input>
               </el-form-item>
                <el-form-item label="选择支付方式"   prop="payMode">
                     <el-select
                           v-model="cardForm.payMode"
                           placeholder="-请选择支付方式-"
                           size="large"
                           style="width: 100%"
                           >
                           <el-option
                               v-for="item in selectList.payModeList"
                               :key="item.value"
                               :label="item.label"
                               :value="item.value"
                           />
                           </el-select>
              </el-form-item>
              <el-form-item label="备注" >
                <el-input v-model="cardForm.note" type="textarea"  />
             </el-form-item>
               <el-form-item>
                   <el-button type="danger"  @click="bindConfirm(memberBindRef)">确认</el-button>
                    <el-button type="success" @click="cancelForm">取消</el-button>
               </el-form-item>
       </el-form>


   </div>
</template>

<script setup>
import {ref,reactive} from 'vue'
import { getMemberInfo } from '@/api/member'

//表单对象
const memberBindRef=ref()
//绑定会员卡的数据
const cardForm = reactive({
   memberId:'',//会员id
   cardId: '',
   validCount: 50,
   validDay: 30,
   receivedMoney: '',
   payMode:'',
   note: ''
})

//表单验证  基础验证
const rules = reactive({
   cardId: [
      { required: true, message: '请选择会员卡', trigger: 'change',}
   ],
   receivedMoney: [ 
      {required: true, message: '请输入支付金额', trigger: 'blur',},
   ],
   payMode: [
      {required: true, message: '请选择付款方式',   trigger: 'change', },
   ]
})

// todo  数据调用接口查询到的
const selectList = reactive({
   cardList: [
      {
         value: '1',
         label: '测试卡',
      },
      {
         value: '2',
         label: '铜卡',
      },
      {
         value: '3',
         label: '金卡',
      },
   ],
   payModeList: [
      
      {
         value: '1',
         label: '支付宝',
      },
      {
         value: '2',
         label: '微信',
      },
      {
         value: '3',
         label: '现金',
      },
      {
         value: '4',
         label: '银行卡',
      },
   ],
})

const bindConfirm = async (formE) => {
   if(!formE) return
  await formE.validate((valid, fields) => {
      if (valid) {
         //todo 调用后台接口 保存绑定会员卡的信息
         console.log('===绑定会员卡确认=',cardForm)
         ElMessageBox.confirm(
            '你确定要绑定吗?',
            '提示',
            {
               confirmButtonText: '确定',
               cancelButtonText: '取消',
               type: 'warning',
            }
         )
            .then(() => {
               //todo调用后端接口 为会员绑定对应的会员卡
               
               ElMessage({
                  type: 'success',
                  message: '绑定会员卡成功',
               })
            })
            .catch(() => {
               ElMessage({
                  type: 'info',
                  message: '取消绑定操作',
               })
            })
      } else {
         console.log('错误的提交!', fields)
      }
   })
}
   
 


//取消按钮
const cancelForm = () => {
  
}
//会员查询
const loading = ref(false)
const remoteMemberData = ref([])
const remoteMethod = () => {
   loading.value = true
   setTimeout(() => {
      loading.value = false
      //todo 调用接口查询课程 
      getMemberInfo().then(res => {
         console.log('课程数据：', res)
         remoteMemberData.value = res.data
         console.log('remoteMemberData：', remoteMemberData.value)
      })
   }, 2000);
}
</script >
<style lang="less" scoped>
.w50{
   width: 45%;
}
.circular {
  display: inline;
  height: 30px;
  width: 30px;
  animation: loading-rotate 2s linear infinite;
}
.path {
  animation: loading-dash 1.5s ease-in-out infinite;
  stroke-dasharray: 90, 150;
  stroke-dashoffset: 0;
  stroke-width: 2;
  stroke: var(--el-color-primary);
  stroke-linecap: round;
}
</style>